<template>
  <div
    class="group flex items-center px-2 rounded-lg bg-gray-200 hover:bg-gray-300 border border-transparent overflow-hidden w-[200px]"
  >
    <div class="pointer-events-none shrink-0 flex items-center mr-1.5 justify-center w-20px h-20px">
      <n-icon size="16" class="text-gray-500">
        <search />
      </n-icon>
    </div>
    <input
      class="group-hover:bg-gray-300 grow block h-10 bg-gray-200 border-0 text-gray-700 text-[13px] placeholder:text-gray-500 appearance-none outline-none caret-blue-600"
      placeholder="搜索"
      autocomplete="off"
      type="text"
      value=""
      name="query"
    />
  </div>
</template>

<script setup lang="ts">
import { Search } from '@vicons/tabler'
</script>

<style scoped lang="scss"></style>
